import React ,{useState ,useEffect} from 'react';
import { DatePicker, Space ,Pagination } from 'antd';
import style from './OrderManagement.module.scss'
import {orderListApi} from '../../http/orderApi'
import {useNavigate} from "react-router-dom";

const { RangePicker } = DatePicker;
function OrderManagement(props) {
    const navigate = useNavigate()
    const initState = {
        classification:'全部订单',
        startTime:'',
        endTime:'',
        num:'',
        current:1,
        pageSize:10,
        total:100
    }
    const initList = [{
        id:'全部订单',
        num:'',
        name:'',
        gender:'',
        state:'1',
        customerName:'10',
        phone:'',
        createTime:''
    }]
    const [state , setState] = useState(initState)
    const [list , setList] = useState(initList)
    const changeInput =(e)=>{
        setState({
            ...state,[e.target.name]:e.target.value
        })
    }
    //选择状态
    const selectChange =(e)=>{
        console.log(e.target.value)
        setState({
            ...state,classification:e.target.value
        })
    }
    //选择日期
    const selectDate =(value)=>{
        setState({
            ...state,startTime:value[0]._d,endTime:value[1]._d
        })
        console.log(value)
    }

    //定义列表渲染函数
    const initListFc = (state)=>{
        orderListApi(state)
            .then(res=>{
                setList(res.data.data)
            })
    }
    //页面列表渲染
    const listDate = list.map(item=><tr key={item.id}>
        <td>{item.num}</td>
        <td>{item.name}</td>
        <td>{item.gender}</td>
        <td>{item.state}</td>
        <td>{item.customerName}</td>
        <td>{item.phone}</td>
        <td className={style.time_box}>{item.createTime}</td>
        <td className={style.operation}>
            <div onClick={(e)=>{clickHandler(e,item.id)}}>详情</div>
            <div>核销</div>
        </td>
    </tr>)
    //页面加载时渲染
    useEffect(()=>{
        initListFc(state)
    },[])
    //开始搜索
    const submitHanlder = ()=>{
        initListFc(state)
    }
    //点击详情和核销
    const clickHandler=(e,id)=>{
        console.log(e.target.value)
        if(e.target.innerText == '详情'){
            navigate('/order/details?id='+id)
        }
    }
    //改变分页大小
    const pageSizeSet=(current, size)=>{
        setState({
            ...state,current,pageSize:size
        })
        initListFc(state)
    }
    return (
        <div>
            <div className={style.header}>订单管理</div>
            <div className={style.find}>
                <div className={style.input_box}>
                    <select value={state.classification} onChange={(e)=>selectChange(e)}>
                        <option value="全部订单" label="全部订单"></option>
                        <option  value="待支付" label="待支付"></option>
                        <option  value="待服务" label="待服务"></option>
                        <option  value="已完成" label="已完成"></option>
                        <option  value="退款中" label="退款中"></option>
                        <option  value="已退款"label="已退款"></option>
                        <option  value="已取消" label="已取消"></option>
                    </select>
                </div>
                <div className={style.input_box}>
                    <Space direction="vertical" size={14}>
                        <RangePicker className={style.time} onChange={selectDate}/>
                    </Space>
                </div>
                <div className={style.input_box}>
                    <input placeholder='输入订单号或手机号查询'  name="num" className={style.input} onChange={(e)=>changeInput(e)}/>
                </div>
                <div className={style.login_btn} onClick={submitHanlder}>查询</div>
            </div>
            <div className={style.table_box}>
                <table className={style.table}>
                    <thead>
                        <tr>
                            <th>订单编号</th>
                            <th>项目名称</th>
                            <th>订单金额</th>
                            <th>订单状态</th>
                            <th>客户姓名</th>
                            <th>联系手机</th>
                            <th className={style.time_box}>创建时间</th>
                            <th className={style.operation}>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                    {listDate}
                    </tbody>

                </table>
            </div>
            <div className={style.pageSize}>
                <Pagination defaultCurrent={state.current} total={state.total} pageSize={state.pageSize} onChange={pageSizeSet} onShowSizeChange={pageSizeSet}/>
            </div>
        </div>
    );
}

export default OrderManagement;